import React, { Component } from 'react'
// import { Link } from 'react-router-dom'
import Header from '../../components/Header/Header'// 头部组件
import { Tabs, Badge, Button, Radio, Empty, SwipeAction, Toast } from 'antd-mobile'
import './Shop.less'// less样式
// 导航栏组件
import Tablist from '../../components/Tablist/Tablist'
import { imgPre } from '../../request/http'
import { filterPrice } from '../../filters/index'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions, getArr, getIsAllCheck, getShops, getTotalPrice} from '../../store/modules/shop'

class Shop extends Component {
  render() {
    let {arr,shops,isAllcheck,totalPrice,shopFn:{allCheck,Del,add,sub,changeOne}}=this.props;
    return (
      <div className='shop'>
        <Header title="购物车" back></Header>
        <Tablist arr={arr}></Tablist>
        <div className='list'>
          {shops.length > 0 ?
            <>
              {shops.map((item, index) => {
                return <SwipeAction
                  rightActions={[
                    {
                      key: 'delete',
                      text: '删除',
                      color: 'danger',
                    },
                  ]}
                  key={item.id}
                  // 删除
                  onAction={() => Del(item.id)}
                >
                  <div className='check' >
                    <Radio checked={item.ischeck} onChange={(e) => changeOne(e,index)}></Radio>
                    <div className='item' >

                      <div className='left'>
                        <img src={imgPre + item.img} alt="" />
                      </div>
                      <div className='right'>
                        <h3>{item.goodsname}</h3>
                        <div>
                          <span>{'￥' + filterPrice(item.price?item.price:0)}</span>
                          {/* -- */}
                          <button onClick={() => sub(item.id,item.num)}>-</button>
                          <i>{item.num}</i>
                          {/* ++ */}
                          <button onClick={() => add(item.id)}>+</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </SwipeAction>
              })}
            </> : <Empty description='暂无数据' />
          }
        </div>
        <div className='all'>
          <Radio checked={isAllcheck} onChange={(e) =>allCheck(e)}>全选</Radio>
          <span>合计：{filterPrice(totalPrice)}</span>
          {/* <Button>去结算</Button> */}
          <button>结算</button>
        </div>
      </div>
    )
  }
  componentDidMount(){
this.props.shopFn.requestCartList()
  }
}
// 取数据
const mapStateToProps=state=>{
  return {
    shops:getShops(state),
    isAllcheck:getIsAllCheck(state),
    arr:getArr(state),
    totalPrice:getTotalPrice(state)
  }
}
// 取方法
const mapDispatchToProps=dispatch=>{
  return {
      shopFn:bindActionCreators(actions,dispatch)
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Shop)
